<template>
    <div class="ys-select-person">
        <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }" v-if="!noData">
            <ul class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-immediate-check="false" infinite-scroll-disabled="isFinished" infinite-scroll-distance="50">
                <li v-for="(item,index) in perList" class="page-infinite-listitem flex-layout" @click="goOtherHomePage(index)">
                    <div class="ranking" :class="{['top-three-ranking' + index]:item.isTopThree}">{{index + 1}}</div>
                    <Avatar :avatar="item.avatar" :name="item.name"></Avatar>
                    <div class="person-info flex">
                        <div class="name">{{item.name}}</div>
                        <div class="depName">{{item.depName}}</div>
                    </div>
                    <span class="walking-number" :class="{'top-three':item.isTopThree}">{{item.formatStep || item.stepCount}}</span>
                </li>
            </ul>
            <p v-show="loading" class="page-infinite-loading">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </p>
        </div>
        <div class="no-data" v-if="noData">
            <div class="circle">
                <img src="../assets/img/no-select.png" alt="暂无数据">
            </div>
            <p>该时段暂无运动记录</p>
        </div>
    </div>
</template>

<script>
    import util from '../assets/util'
    import Avatar from './ys-avatar.vue'

    export default {
        components:{
            Avatar
        },
        data() {
            return {
                loading: false,
                isFinished: false,
                wrapperHeight: 0,
                noData:false,
                perList:[],
                dateParams:{
                    date1:'',
                    date2:''
                },
                pageInfo: {
                    page: 1,
                    size: 20
                }
            };
        },

        props:{
            perUrl:String
        },
        watch:{
           dateParams(n, o) {
                this.pageInfo.page = 1;
                this.noData = false;
                this.getInitData();

           }
        },

        created(){
        },

        methods: {
            loadMore() {
                if(this.loading) return;
                this.loading = true;
                this.$http.get(this.perUrl, {
                    params:{
                        date1:this.dateParams.date1,
                        date2:this.dateParams.date2,
                        page:this.pageInfo.page,
                        size:this.pageInfo.size
                    }
                }).then((res)=>{
                    this.loading = false;

                    this.formatPerStep(res.data.list);

                    let resList = res.data.list;
                    let length = resList.length;

                    if(length > 0) {
                        this.perList = this.perList.concat(res.data.list);
                    }
                    if(length < this.pageInfo.size) {
                        this.isFinished = true;
                        this.loading = false;
                    } else {
                        this.pageInfo.page ++;
                        this.isFinished = false;
                    }

                }).catch((res) => {
                    console.log(res);
                    this.loading = false;
                });

            },
            getInitData() {
                this.loading = true;
                this.$http.get(this.perUrl, {
                    params:{
                        date1:this.dateParams.date1,
                        date2:this.dateParams.date2,
                        page:this.pageInfo.page,
                        size:this.pageInfo.size
                    }
                }).then((res) => {

                    this.loading = false;
                    this.formatPerStep(res.data.list);

                    this.perList = res.data.list;

                    let length = this.perList.length;

                    if(length > 0) {
                        for(var i = 0; i < 3; i++) {
                            if(this.perList[i]) {
                                this.perList[i].isTopThree = true;
                            }
                        }
                        if(length < this.pageInfo.size) {
                            this.isFinished = true;
                            this.loading = false;
                        } else {
                            this.isFinished = false;
                            this.pageInfo.page++;
                        }
                    } else {
                        this.noData = true;
                    }

            }).catch((res) => {
                    console.log(res);
                    this.loading = false;
                });
            },
            initEvent(){
                this.$eventBus.$on('select', (obj) => {
                    this.dateParams = obj;
                })
            },

            goOtherHomePage(i){
                let rowData = this.perList[i];
                let userInfo = util.session.get('sport-user-info');
                util.session.set('rowData', rowData);
                if(userInfo.memberId === rowData.memberId) {
                    this.$router.push({path:'/myHomePage'});
                } else {
                    this.$router.push({path:'/otherHomePage'});
                }
            },

            formatPerStep(array){
                array.forEach(function (item) {
                    if(item.stepCount > 9999){
                        item.formatStep = util.formatNumber(item.stepCount);
                    }
                    if(item.upVote > 9999) {
                        item.upVote = '9999+';
                    }
                })
            },
        },

        mounted() {
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
            this.initEvent();
        }
    };
</script>

<style lang="less">
    .page-infinite-list{
        background: #fff;
    }
    .ys-select-person .page-infinite-listitem{
        display:flex;
        align-items:center;
        height: 58px;
        border-bottom: solid 1px #eee;
        text-align: center;
        list-style-type: none;
    }
    .ys-select-person .page-infinite-list li:first-child{
        border-top: solid 1px #eee;
    }
    .ys-select-person .ranking{
        width: 22px;
        height: 22px;
        margin-left: 10px;
        color: #262626;
        font-size: 14px;
        line-height: 22px;
        background-size: cover;
    }

    // .ys-select-person .top-three-ranking0{
    //     color: #FFFFFF !important;
    //     background-image: url("../assets/img/badge01@2x.png");
    // }
    // .ys-select-person .top-three-ranking1{
    //     color: #FFFFFF !important;
    //     background-image: url("../assets/img/badge02@2x.png");
    // }
    // .ys-select-person .top-three-ranking2{
    //     color: #FFFFFF !important;
    //     background-image: url("../assets/img/badge03@2x.png");
    // }
    .ys-select-person .per-icon{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 20px;
    }
    .ys-select-person .like span{

        font-size: 12px;
    }
    .ys-select-person .iconfont{
        font-size: 16px;
    }
    .ys-select-person .yousport-like span{
        text-align: left;
    }
    .ys-select-person .walking-number{
        font-size: 21px;
        text-align: right;
        margin-right: 14px;
        margin-left:20px;
    }
    .ys-select-person .top-three{
        color: #29B6F6;
    }
    .ys-select-person .page-infinite-loading{
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
    .ys-select-person .page-infinite-loading div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
    .ys-select-person {
        background: #fff;
    }
    .no-data {
        background: #f5f5f5;
        text-align: center;
        padding:50px 0;
        img {
            width:80px;
            height:auto;
        }
        p {
            margin:15px 0;
            font-size: 15px;
            em{
              font-style: normal;
              color: red;
            }
        }
    }

</style>
